<template>
	<el-header>
		<div class="left-panel">
			<sc-select-filter :data="filterData" :label-width="80" @on-change="filterChange"></sc-select-filter>
		</div>
		<div class="right-panel">
			<div class="right-panel-search">
				<el-input v-model="search.keyword" placeholder="日志标题" clearable></el-input>
				<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
			</div>
		</div>
	</el-header>
	<el-main class="nopadding">
		<scTable ref="table" :apiObj="apiObj" row-key="diaryId" stripe remoteSort remoteFilter :show-header="false">
			<el-table-column :show-overflow-tooltip="true">
				<template #default="scope">
					<el-card shadow="hover" :header="`【`+this.getDiaryType(scope.row.diaryType)+`】《`+scope.row.title+`》`+scope.row.diaryDay" class="diary-item">
						<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
						<span style="font-size: 14px;margin-left: 10px;position: relative;top:-8px">{{ scope.row.createUserName }}</span>
						<span style="float: right">{{scope.row.createTime}}</span>
						<div v-html="scope.row.content"></div>
						<div style="margin-top:10px">
							<attach-menu :attachIds="scope.row.attachId" :roleFlag="4" :preview="true"></attach-menu>
						</div>
						<div style="float: right;margin-bottom: 10px">
							<el-button type="text" @click="editDiary(scope.row)">编辑</el-button>
							<el-button type="text" @click="deleteDiary(scope.row)">删除</el-button>
						</div>
					</el-card>
				</template>
			</el-table-column>
		</scTable>
	</el-main>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
</template>

<script>
import saveDialog from './save'
import scSelectFilter from '@/components/scSelectFilter'
import AttachMenu from '@/views/module/attachMenu'
export default {
	name: 'Work Diary',
	components: {
		scSelectFilter,
		AttachMenu,
		saveDialog
	},
	data() {
		return {
			apiObj: this.$API.office.diary.getMyDiaryList,
			dialog: {
				save: false
			},
			filterData: [
				{
					title: "日期范围",
					key: "date",
					multiple: false,
					options: [
						{
							label: "全部",
							value: ""
						},
						{
							label: "今日",
							value: "1"
						},
						{
							label: "昨日",
							value: "2"
						},
						{
							label: "一周内",
							value: "3"
						},
						{
							label: "一月内",
							value: "4"
						},
						{
							label: "一月前",
							value: "5"
						}
					]
				}
			],
			search: {
				date:'',
				keyword: "",
				diaryDay: ""
			}
		}
	},
	mounted() {
	},
	methods: {
		getDiaryType(val)
		{
			if(val=="1")
			{
				return "工作日志";
			}else if(val=="2")
			{
				return "个人日志";
			}else {
				return "未知";
			}
		},
		filterChange(data) {
			this.search.date = data.date;
			this.$refs.table.upData(this.search)
		},
		getMyDiaryList(diaryDay) {
			this.search.diaryDay = diaryDay;
			this.$refs.table.upData(this.search)
		},
		editDiary(row){
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(row)
			})
		},
		async deleteDiary(row)
		{
			var res = await this.$API.office.diary.deleteDiary.post({diaryId: row.diaryId});
			if(res.code == 200){
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.$refs.table.refresh()
				this.$message.success("删除成功")
			}else{
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		//本地更新数据
		handleSaveSuccess() {
			this.$refs.table.refresh()
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
	}
}
</script>

<style scoped>
.diary-item {
	margin-left: 10%;
	width: 80%;
}

:deep(.el-calendar__header) {
	padding: 0px 0px 10px 0px;
}

:deep(.el-calendar-table .el-calendar-day) {
	height: 30px;
	text-align: center;
}

:deep(.el-calendar-table td) {
	border-bottom: 0px solid #EBEEF5;
	border-right: 0px solid #EBEEF5;
}

:deep(.el-calendar-table tr td:first-child) {
	border-left: 0px solid #EBEEF5;
}

:deep(.el-calendar-table tr:first-child td) {
	border-top: 0px solid #EBEEF5;
}

:deep(.el-calendar__body) {
	border-top: 1px solid #EBEEF5;
	padding: 5px;
	p {
		text-align: center;

	i {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		background-color: #D0333C;
		border-radius: 50%;
		text-align: center;
	}
	}
}
:deep(.el-calendar__header) {
	border-bottom: 0px solid #EBEEF5;

.el-calendar__title {
	display: none;
}

.el-calendar__button-group {
	margin-left: 10%;
}

}
:deep(.el-input__inner){
	line-height: 28px;
	height: 28px;
	width: 100%;
}

:deep(.el-date-editor.el-input) {
	width: 30%;
	float: left;

.el-input__icon {
	line-height: 28px;
}

}
:deep(.el-input--suffix .el-input__inner) {
	padding-right: 0px;
}

:deep(.el-input__suffix) {
	display: none;
}

div:hover {
	color: #2c3e50;
}
</style>
